<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ include file="/include/head.jsp"%>
<html>
<head>
  <title>Complex Layout</title>

    <style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    p {
        margin:5px;
    }
    </style>

    <script type="text/javascript">
    Ext.onReady(function(){
    
        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
    
    	var menu = new Ext.Panel({
		    region: 'west',
		    id: 'west-panel', // see Ext.getCmp() below
		    title: 'West',
		    split: true,
		    width: 200,
		    minSize: 175,
		    maxSize: 400,
		    collapsible: true,
		    margins: '0 0 0 5',
		    layout: {
		        type: 'accordion',
		        animate: true
		    },
		    listeners: {
		    	beforerender: function(panel) {
		    		Ext.Ajax.request({
				        url: 'MenuAction!getMenuRootList.do',
				        method: 'POST',
				        success: function(response) {
				            var json = Ext.decode(response.responseText);
				            for(var i = 0; i < json.length; i++) {
				            	var item = new Ext.Panel({
					                title: json[i].text,
					                items: [new TreePanel({
					                	id: json[i].id
					                })]
					            });
				            	panel.add(item);
				            }
				            panel.doLayout();
				        },
			         	failure: function() {
			         	 	Ext.MessageBox.alert('提示', '菜单加载失败,请重试.');
			         	}
				    });
		    	}
		    }
		});
    	
    	var TreePanel = Ext.extend(Ext.tree.TreePanel, {
    		constructor: function(config) {
    			config = Ext.apply({
    				id: this.id,
                	useArrows: true,
			        autoScroll: false,
			        animate: true,
			        enableDD: false,//拖拽
			        containerScroll: true,
			        border: false,
			        rootVisible: false,
			        loader: new Ext.tree.TreeLoader(),
			        root: new Ext.tree.AsyncTreeNode({
				        //text: '菜单',
				        draggable: false,// 根节点不容许拖动
				        expanded: false
				    }),
			        listeners: {
		    			beforeload: function(node) {//加载之前
                			this.loader.dataUrl = 'MenuAction!getMenuLeafByPid.do?pid='+ this.id;
				        },
				        beforeclick: function(node) {//点击事件
				        	//已打开标签是否超过10个
				        	if(tabs.items.getCount() > 10 ) {
				        		Ext.MessageBox.alert('提示','当前已打开10个页签,请您先关闭暂时不用的页签.');
				        	} else {
				        		//判断标签是否已经打开
				        		if(Ext.getCmp('tab'+node.id) == undefined) {
				        			//添加标签
						        	tabs.add({
						        		id: 'tab' + node.id,
							            title: node.text,
							            html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+ contextPath + node.attributes.url +'></iframe>',
							            closable:true,
		                				autoScroll: true
							        }).show();
					        	} else {
					        		//激活标签
					        		tabs.setActiveTab(Ext.getCmp('tab'+node.id));
					        	}
				        	}
				        }
			        }
		        }, config);
		        TreePanel.superclass.constructor.call(this, config);
    		}
    	});
    	
        var tabs = new Ext.TabPanel({
            region: 'center', // a center region is ALWAYS required for border layout
            deferredRender: false,
            resizeTabs: false, // turn on tab resizing
            enableTabScroll: true,
            activeTab: 0,     // first tab initially active
            defaults: {autoScroll:true},
            items: [{
                title: '欢迎界面',
                autoScroll: true
            }]
        });
    
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.BoxComponent({
                region: 'north',
                height: 32, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
                }
            }), menu, tabs]
        });
    });
    </script>
</head>
<body>
</body>
</html>